<template>
	<view class="container">
		<view style="height: 30rpx;"></view>
		<view class="header-box">
			<view>当前账户剩余可用积分：{{userIntegral || 0}}</view>
		</view>
		<!-- 商品详情 - start -->
		<view class="item">
			<view class="good" v-for="(item,index) in postData">
				<view class="good-content">
					<image class="good-img" :src="item.goodsImg"></image>
					<view class="good-info">
						<view class="good-title-box">
							<view class="good-title">{{item.goodsName}}</view>
						</view>
						<view v-if="item.exchangeType === 1" class="submit-info-common-right">{{item.exchangePoints}}积分</view>
						<view v-else class="submit-info-common-right">{{item.exchangePoints}}积分+{{item.exchangeAmount}}元</view>
					</view>
				</view>
				<view class="good-z-price">
					<view class="goods-price-title">数量：</view>
					<view class="selec-main-box">
						<view class="shop-num-right-box">
							<view @click="delNum(item,index)" class="shop-num-right-box-left">-</view>
							<view class="shop-num-right-box-center">
								<input @input='updatePrice()' v-model="item.goodsNumber" type="number">
							</view>
							<view @click="addNum(item,index)" class="shop-num-right-box-right">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 - end -->
		<view style="width: 750rpx;height: 170rpx;"></view>
		<!-- 底部菜单 -->
		<view class="bottom-box">
			<view class="bottom-notice">提示: 人民币需要支付{{tolMoney}}元，请线下支付给店长</view>
			<view class="button-text-box">
				<view class="button-left">总计扣减积分：<text>{{tolIntegral}}</text></view>
				<view  @click="openConfirm()" class="button-text">确认</view>
			</view>
		</view>
		<image @click="openScan()" class="open-button" src="https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/wxapp/newMember/icon_tianjiashangpin.png" mode=""></image>
		<!-- 确认弹窗 -->
		<submit-box ref="submit" :tolIntegral="tolIntegral" :showSubmit="showSubmit" @toClose="closeConfirm()" @selectOk="submitOrder()"></submit-box>
	</view>
</template>

<script>
	import SubmitBox from "./components/SubmitBox.vue";
	export default {
		components: {SubmitBox},
		data() {
			return {
				isLogined: uni.getStorageSync("token"),
				isShow: true,
				scanContent:'', // 二维码单号
				invitorCode:'', // 邀请码
				postData:[],
				tolMoney: '',
				tolIntegral: '',
				showSubmit: false,
				userIntegral: 0
			}
		},
		onLoad(option) {
			const sceneStr = decodeURIComponent(option.scene);
			//判断是否是扫描二维码
			if(sceneStr){
				// 分割字符串
				let arr = sceneStr.split('_')
				this.scanContent = arr[0]
				this.invitorCode = arr[1]
			}
			if(!this.isLogined){
				this.login("impression");
				return
			}
			this.getInfo()
			this.getNum()
		},
		methods: {
			// 打开扫一扫
			openScan(){
				uni.scanCode({
					success(res) {
						console.log(res)
					}
				})
			},
			// 打开确认框
			openConfirm(){
				this.showSubmit = true
			},
			// 关闭弹窗
			closeConfirm(){
				this.showSubmit = false
			},
			// 增加数量
			addNum(item,index){
				this.postData[index].goodsNumber += 1
				this.updatePrice()
				// this.$forceUpdate()
			},
			// 减少数量
			delNum(item,index){
				this.postData[index].goodsNumber -=1
				if(this.postData[index].goodsNumber <= 0){
					this.postData[index].goodsNumber = 0
				}
				this.updatePrice()
			},
			// 计算应售价格
			updatePrice(){
				let tolMoney = 0
				let tolIntegral = 0
				let tempData = this.postData
				for(let i = 0;i<tempData.length;i++){
					let exchangeAmount = tempData[i].exchangeAmount*tempData[i].goodsNumber
					let exchangePoints = tempData[i].exchangePoints*tempData[i].goodsNumber
					tolMoney += exchangeAmount
					tolIntegral += exchangePoints
				}
				this.tolMoney = tolMoney
				this.tolIntegral = tolIntegral
			},
			// 获取详情
			getInfo(){
				let postData = {}
				postData.scanContent = this.scanContent
				this.$javaApiTag.doRequest("get",'/exchange/customer/swap/scanGoodsInfo',postData).then(res=>{
					if(res.data.code === 0){
						res.data.data.goodsNumber = 1
						this.postData.push(res.data.data)
						this.updatePrice()
					}else{
					}
				})
			},
			// 获取积分数
			getNum(){
				let postData = {}
				this.$javaApiTag.doRequest("post",'/tags/customerkt/integral/myIntrgral',postData).then(res=>{
					if(res.data.code === 0){
						this.userIntegral = res.data.data.integerTotal
					}
				})
			},
			// 提交数据
			submitOrder(){
				let that = this
				let info = []
				if(this.tolIntegral > this.userIntegral){
					uni.showToast({title:'积分余额不足',icon:"none",duration:5000})
					return
				}
				for(let i = 0;i<this.postData.length;i++){
					let tempData = {}
					tempData.exchangePoints = this.postData[i].exchangePoints
					tempData.goodsNo = this.postData[i].goodsNo
					tempData.goodsNumber = this.postData[i].goodsNumber
					info.push(tempData)
				}
				that.$javaApiTag.doRequest("post", "/exchange/customer/swapGoods", info,'json').then(res => {
					if(res.data.code == 0){
						uni.reLaunch({
							url:'/pages/exchange/success?num='+this.tolIntegral,
						})
					}else{
						uni.showToast({title:res.data.message,icon:"none",duration:5000})
					}
				})
			},
			async login(event) {
			  try {
			    const code = await this.wxLogin();
			    const checkLoginRes = await this.$NoteApi.doRequest("get", "login", { code, requestCode: '' });
			    const { code: checkLoginCode, data, message } = checkLoginRes.data;
			    if (checkLoginCode == 0) {
			      uni.setStorageSync("userInfo", data);
			      uni.setStorageSync("token", data.token)
			      this.getInfo()
				  this.getNum()
			    } else {
			      uni.showToast({
			        title: message,
			        icon: 'none'
			      })
			    }
			  } catch (error) {
			    uni.showToast({
			        title: error,
			        icon: 'none'
			      })
			  }
			},
			wxLogin() {
			  return new Promise((resolve, reject) => {
			    uni.login({
			      provider: 'weixin',
			      success: (loginRes) => {
			        resolve(loginRes.code)
			      },
			      fail: (error) => {
			        reject(error)
			      }
			    })
			  })
			},
			noLogin() {
			  this.isShow = false;
			},
			// 跳转到订单成功页面
			goSuccess(payConfig) {
				uni.navigateTo({
					url:'/pages/payment/paySuccess?orderNo='+payConfig.onlineOrderNo,
				})
			},
		}
	}
</script>

<style scoped>
	.container{
		background-color: #F1F1F1;
		width: 750rpx;
		min-height: 100vh;
	}
	.header-box{
		width: 690rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
		background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/newMember/bg_jifen.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		font-size: 38rpx;
		line-height: 53rpx;
		background-color: #ffffff;
		color: #333333;
		padding: 30rpx;
		margin:0 30rpx 30rpx 30rpx;
	}
	.header-img{
		width: 42rpx;
		height: 42rpx;
		margin-right: 20rpx;
	}
	/* 商品 */
	.item{
		margin: 30rpx;
		box-sizing: border-box;
		padding: 0rpx 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}
	.item-top{
		color: #666666;
		font-size: 36rpx;
		line-height: 50rpx;
		border-bottom: 2upx solid #F1F1F1;
		padding: 30rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.good{
		border-bottom: 2upx solid #F1F1F1;
	}
	.good-content{
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding-top: 30upx;
	}
	.good-content .good-img{
		width: 160rpx;
		height: 160rpx;
		background: #D8D8D8;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}
	.good-info{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}
	.good-title-box{
		display: flex;
		justify-content: space-between;
	}
	.good-title{
		font-size: 42rpx;
		color: #333333;
		font-weight: 400;
		line-height: 53rpx;
		overflow: hidden;
		max-width: 460rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;
		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
	}
	.good-info .good-price{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.good-danwei{
		font-size: 34rpx;
		color: #888888;
	}
	.good-price-value{
		font-size: 34rpx;
		color: #333333;
	}
	.good-num{
		text-align: end;
		font-size: 34rpx;
		color: #888888;
		padding-top: 20rpx;
	}
	.good-z-price{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 0;
	}
	.goods-price-title{
		font-size: 36rpx;
		color: #666666;
		line-height: 50rpx;
	}
	.goods-price-price{
		font-weight: 600;
		font-size: 40rpx;
		color: #5CAE77;
		line-height: 56rpx;
	}
	
	.price-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		margin: 0 30rpx 30rpx 30rpx;
		padding: 30rpx 24rpx;
		border-radius: 8rpx;
	}
	.price-title{
		font-size: 36rpx;
		font-weight: 500;
		color: #666666;
		line-height: 50rpx;
	}
	.price-num{
		font-weight: 500;
		color: #F33F02;
		line-height: 62rpx;
		font-size: 44rpx;
	}
	.bottom-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		background-color: #ffffff;
		padding: 20rpx 0 50upx 0;
	}
	.bottom-notice{
		width: 750rpx;
		line-height: 68rpx;
		background: #FFE6E6;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #FF0000;
		text-align: center;
	}
	.button-text-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx 0 30rpx;
	}
	.button-left{
		font-size: 42rpx;
		color: #666666;
	}
	.button-left text{
		font-size: 45rpx;
		color: #5CAE77;
		max-width: 100rpx;
		overflow: hidden;
	}
	.button-text{
		width: 240rpx;
		color: #ffffff;
		height: 98rpx;
		text-align: center;
		line-height: 98rpx;
		font-size: 44rpx;
		background-color: #5CAE77;
		border-radius: 14rpx;
	}
	.tc-button{
		width: 120upx;
		height: 42upx;
		line-height: 42upx;
		text-align: center;
		background: #28B57F;
		border-radius: 0px 4upx 4upx 0px;
		color: #ffffff;
	}
	.selec-main-box{
		display: flex;
		justify-content: flex-end;
	}
	.shop-num-right-box {
		width: 250upx;
		height: 77upx;
		line-height: 77upx;
		text-align: center;
		border-radius: 4upx;
		border:2upx solid #979797;
		display: flex;
	}
	.shop-num-right-box-left {
		font-size: 50upx;
		width: 77upx;
		flex: 3;
		border-right: 2upx solid #979797;
	}
	.shop-num-right-box-center {
		flex: 4;
	}
	.shop-num-right-box-center input {
		width: 100%;
		height: 77upx;
		line-height: 77upx;
	}
	.shop-num-right-box-right {
		font-size: 50upx;
		width: 77upx;
		flex: 3;
		border-left: 2upx solid #979797;
	}
	.submit-info-common-right{
		text-align: right;
		color: #FF9500;
		font-weight: bold;
		font-size: 42upx;
	}
	.open-button {
		position: fixed;
		right: 20upx;
		bottom: 280upx;
		width: 142upx;
		height: 142upx;
	}
</style>
